<script lang="ts" setup>
import { ref } from 'vue';

import { Page } from '@vben/common-ui';

import { Button, Dropdown, Input, Radio, Select, Table } from 'ant-design-vue';
import {
  Download,
  Edit,
  FileText,
  Plus,
  Printer,
  Search,
  Trash2,
  Upload,
} from 'lucide-vue-next';

// 响应式数据
const assetType = ref('');
const assetSearch = ref('');
const assetStatus = ref('active');

// 下拉选项
const assetTypeOptions = ref([
  { label: '全部', value: '' },
  { label: '房屋及建筑物', value: 'BUILD' },
  { label: '一般设备', value: 'COMMON' },
  { label: '办公设备', value: 'OFFICE' },
  { label: '其他设备', value: 'OTHER' },
  { label: '专用设备', value: 'SPECIAL' },
]);

// 导入/导出下拉菜单
const importExportItems = [
  {
    key: 'import',
    label: '导入资产',
    icon: Upload,
  },
  {
    key: 'export',
    label: '导出资产',
    icon: Download,
  },
];

// 固定资产表格数据
const assetData = ref([
  {
    key: '1',
    assetCode: 'FA001',
    name: '办公楼A栋',
    entryPeriod: '2023-01',
    startUseTime: '2023-01-15',
    category: '房屋及建筑物',
    increaseMethod: '购置',
    usageStatus: '正常使用',
    usagePeriod: 240,
  },
  {
    key: '2',
    assetCode: 'FA002',
    name: '生产设备001',
    entryPeriod: '2023-02',
    startUseTime: '2023-02-10',
    category: '专用设备',
    increaseMethod: '购置',
    usageStatus: '正常使用',
    usagePeriod: 120,
  },
  {
    key: '3',
    assetCode: 'FA003',
    name: '办公电脑',
    entryPeriod: '2023-03',
    startUseTime: '2023-03-05',
    category: '办公设备',
    increaseMethod: '购置',
    usageStatus: '正常使用',
    usagePeriod: 60,
  },
  {
    key: '4',
    assetCode: 'FA004',
    name: '运输车辆',
    entryPeriod: '2023-04',
    startUseTime: '2023-04-20',
    category: '其他设备',
    increaseMethod: '购置',
    usageStatus: '正常使用',
    usagePeriod: 96,
  },
  {
    key: '5',
    assetCode: 'FA005',
    name: '会议室设备',
    entryPeriod: '2023-05',
    startUseTime: '2023-05-12',
    category: '办公设备',
    increaseMethod: '购置',
    usageStatus: '正常使用',
    usagePeriod: 72,
  },
]);

// 表格列配置
const columns = [
  {
    title: '资产编号',
    dataIndex: 'assetCode',
    key: 'assetCode',
    width: 120,
    fixed: 'left',
  },
  {
    title: '名称',
    dataIndex: 'name',
    key: 'name',
    width: 150,
  },
  {
    title: '录入期间',
    dataIndex: 'entryPeriod',
    key: 'entryPeriod',
    width: 120,
  },
  {
    title: '开始使用时间',
    dataIndex: 'startUseTime',
    key: 'startUseTime',
    width: 140,
  },
  {
    title: '类别',
    dataIndex: 'category',
    key: 'category',
    width: 120,
  },
  {
    title: '增加方式',
    dataIndex: 'increaseMethod',
    key: 'increaseMethod',
    width: 100,
  },
  {
    title: '使用情况',
    dataIndex: 'usageStatus',
    key: 'usageStatus',
    width: 100,
  },
  {
    title: '使用期限(月)',
    dataIndex: 'usagePeriod',
    key: 'usagePeriod',
    width: 120,
  },
];

// 事件处理函数
const handleAddAsset = () => {
  // 新增资产卡片逻辑
};

const handleModify = () => {
  // 修改资产逻辑
};

const handleGenerateVoucher = () => {
  // 生成凭证逻辑
};

const handleDelete = () => {
  // 删除资产逻辑
};

const handlePrint = () => {
  // 打印逻辑
};

const handleImportExport = ({ key }: { key: string }) => {
  if (key === 'import') {
    // 导入资产逻辑
  } else if (key === 'export') {
    // 导出资产逻辑
  }
};

const handleReconciliation = () => {
  // 对账逻辑
};

const handleSearch = () => {
  // 查询资产逻辑
};

const handleClear = () => {
  assetType.value = '';
  assetSearch.value = '';
  assetStatus.value = 'active';
};

const handleAssetTypeChange = (value: string) => {
  assetType.value = value;
};

const handleAssetStatusChange = (e: any) => {
  assetStatus.value = e.target.value;
};
</script>

<template>
  <Page auto-content-height>
    <!-- 页面顶部栏 -->
    <div class="mb-6 flex items-center justify-between">
      <!-- 左侧公司名称 -->
      <div class="text-lg font-medium text-gray-900">
        北京神州源科技有限公司
      </div>

      <!-- 中间面包屑 -->
      <div class="flex items-center space-x-2 text-sm text-gray-600">
        <span>固定资产</span>
        <span>></span>
        <span class="text-blue-600">资产管理</span>
      </div>

      <!-- 右侧标签页区域 -->
      <div class="flex items-center space-x-2">
        <div class="rounded bg-gray-100 px-3 py-1 text-sm text-gray-600">
          明细账
        </div>
        <div class="rounded bg-gray-100 px-3 py-1 text-sm text-gray-600">
          多栏账
        </div>
        <div class="rounded bg-blue-100 px-3 py-1 text-sm text-blue-600">
          资产管理
        </div>
        <div class="rounded bg-gray-100 px-3 py-1 text-sm text-gray-600">
          报税
        </div>
      </div>
    </div>

    <!-- 操作按钮区 -->
    <div class="mb-4 flex flex-wrap items-center gap-3 rounded-lg bg-white p-4 shadow-sm">
      <Button type="primary" @click="handleAddAsset">
        <Plus class="mr-1 h-4 w-4" />
        新增卡片
      </Button>

      <Button @click="handleModify">
        <Edit class="mr-1 h-4 w-4" />
        修改
      </Button>

      <Button @click="handleGenerateVoucher">
        <FileText class="mr-1 h-4 w-4" />
        生成凭证
      </Button>

      <Button danger @click="handleDelete">
        <Trash2 class="mr-1 h-4 w-4" />
        删除
      </Button>

      <Button @click="handlePrint">
        <Printer class="mr-1 h-4 w-4" />
        打印
      </Button>

      <Dropdown
        :menu="{ items: importExportItems, onClick: handleImportExport }"
        placement="bottomLeft"
      >
        <Button type="primary">
          <Upload class="mr-1 h-4 w-4" />
          导入/导出
        </Button>
      </Dropdown>

      <Button @click="handleReconciliation">对账</Button>
    </div>

    <!-- 筛选与查询区 -->
    <div class="mb-4 rounded-lg bg-white p-4 shadow-sm">
      <div class="mb-4 flex flex-wrap items-center gap-4">
        <!-- 资产类型 -->
        <div class="flex items-center space-x-2">
          <span class="text-sm font-medium text-gray-700">资产类型：</span>
          <Select
            v-model:value="assetType"
            :options="assetTypeOptions"
            class="w-40"
            placeholder="全部"
            @change="handleAssetTypeChange"
          />
        </div>

        <!-- 固定资产搜索 -->
        <div class="flex items-center space-x-2">
          <span class="text-sm font-medium text-gray-700">固定资产：</span>
          <Input
            v-model:value="assetSearch"
            class="w-48"
            placeholder="编码/名称"
          />
        </div>

        <!-- 资产状态 -->
        <div class="flex items-center space-x-2">
          <span class="text-sm font-medium text-gray-700">资产状态：</span>
          <Radio.Group
            v-model:value="assetStatus"
            @change="handleAssetStatusChange"
          >
            <Radio value="active">在役资产</Radio>
            <Radio value="disposed">已清理资产</Radio>
          </Radio.Group>
        </div>
      </div>

      <!-- 查询按钮区 -->
      <div class="flex items-center space-x-3">
        <Button type="primary" @click="handleSearch">
          <Search class="mr-1 h-4 w-4" />
          查询
        </Button>
        <Button @click="handleClear">清除</Button>
      </div>
    </div>

    <!-- 固定资产表格 -->
    <div class="rounded-lg bg-white p-4 shadow-sm">
      <Table
        :columns="columns"
        :data-source="assetData"
        :pagination="{
          total: assetData.length,
          pageSize: 10,
          showSizeChanger: true,
          showQuickJumper: true,
          showTotal: (total, range) =>
            `第 ${range[0]}-${range[1]} 条，共 ${total} 条`,
        }"
        :scroll="{ x: 1200, y: 400 }"
        bordered
        size="middle"
      >
        <!-- 合计行 -->
        <template #summary>
          <Table.Summary.Row>
            <Table.Summary.Cell :col-span="1" class="font-medium">
              合计
            </Table.Summary.Cell>
            <Table.Summary.Cell :col-span="7" class="text-center">
              共 {{ assetData.length }} 项资产
            </Table.Summary.Cell>
          </Table.Summary.Row>
        </template>
      </Table>
    </div>
  </Page>
</template>

<style scoped>
.ant-table-thead > tr > th {
  padding: 12px;
  background-color: #fafafa;
  font-weight: 600;
  text-align: center;
}

.ant-table-tbody > tr > td {
  padding: 12px;
  text-align: center;
}

.ant-table-tbody > tr:hover > td {
  background-color: #f5f5f5;
}

.ant-table-summary > tr > td {
  background-color: #f9f9f9;
  font-weight: 500;
}

.ant-radio-group {
  display: flex;
  gap: 16px;
}

.ant-dropdown-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
</style>